`<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/mine.png"
        alt>
      <span class="back"
        @click="backStaffMans()">员工管理</span>
      <img class="right"
        src="../../images/main/right.png"
        alt>
      <span>{{title}}</span>
    </div>
    <div class="clear"></div>
    <div class="body">
      <div class="body-box">
        <el-form :model="staffInfo"
          class="form"
          ref="staffInfo"
          :rules="rule"
          label-width="230px">
          <el-form-item class="el-form-item"
            label="员工名称："
            prop="name">
            <el-input maxlength="30"
              v-model="staffInfo.name"
              placeholder="请输入员工名称"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item"
            label="员工账号："
            prop="userAccount">
            <el-input maxlength="20"
              v-model="staffInfo.userAccount"
              placeholder="请输入员工账号" @input="userAccountInput"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item"
            label="手机号："
            prop="phone">
            <el-input minlength="11"
              maxlength="11"
              @input="phoneInp"
              v-model="staffInfo.phone"
              placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item"
            label="角色名称："
            prop="roleName">
            <el-input maxlength="10"
              v-model="staffInfo.roleName"
              placeholder="请输入角色名称"></el-input>
          </el-form-item>
          <!-- <div class="list firlist">
        <img class="red"
          src="../../images/main/red.png"
          alt>
        <span class="txt">员工名称：</span>
        <input type="text"
          class="input"
          placeholder="请输入员工名称"
          v-model="staffInfo.name" maxlength = "10">
          <p class="nomsg" v-if="!staffInfo.name">请先输入员工名称</p>
      </div>
      <div class="list">
        <img class="red"
          src="../../images/main/red.png"
          alt>
        <span class="txt">员工账号：</span>
        <input type="text"
          class="input"
          placeholder="请输入员工账号"
          v-model="staffInfo.userAccount" maxlength = "20">
        <span class="tips"
          v-if="showPas">员工账号初始密码为：yunlehui2019</span>

      </div>
      <div class="nomsg" v-if="!staffInfo.userAccount || !/^[0-9a-zA-Z]*$/g.test(staffInfo.userAccount)">请先输入员工账号 英文、数字或组合</div>
      <div class="list">
        <img class="red"
          src="../../images/main/red.png"
          alt>
        <span class="txt">手机号：</span>
        <input type="text"
          class="input"
          placeholder="请输入手机号"
          v-model="staffInfo.phone" maxlength="11">
          <p class="nomsg" v-if="!staffInfo.phone || !( /^1\d{10}$/.test(staffInfo.phone))">请先输入手机号</p>
      </div>
      <div class="list">
        <img class="red"
          src="../../images/main/red.png"
          alt>
        <span class="txt">角色名称：</span>
        <input type="text"
          class="input"
          placeholder="请输入角色名称"
          v-model="staffInfo.roleName" maxlength = "10">
          <p class="nomsg" v-if="!staffInfo.roleName">请先输入角色名称</p>
      </div>
      <div class="clear"></div> -->
          <!-- <div class="submit"
        @click="saveMans()">提交</div> -->
          <el-form-item>
            <el-button type="primary"
              @click="cancel">取消</el-button>
            <el-button type="primary"
              @click="saveMans('staffInfo')">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    var phoneReg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号码不能为空!"));
      }
      setTimeout(() => {
        if (!phoneReg.test(value)) {
          callback(new Error("号码格式有误"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      staffInfo: {
        name: "",
        userAccount: "",
        phone: "",
        roleName: ""
      },
      title: "增加人员",
      showPas: true,
      // params: {
      //   name: "",
      // },
      rule: {
        name: [
          {
            required: true,
            message: "员工名称不能为空且最多10个字符",
            trigger: "blur"
          }
        ],
        userAccount: [
          {
            required: true,
            message: "员工账号不能为空且最多20个字符",
            trigger: "blur"
          }
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        roleName: [
          {
            required: true,
            message: "角色名称不能为空且最多10个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    userAccountInput(){
      let _this = this;
      setTimeout (() => {
        _this.staffInfo.userAccount =  _this.staffInfo.userAccount.replace(/[^0-9A-Za-z]/img,"");
      }, 10 );
    },
    phoneInp() {
      let _this = this;
      setTimeout (() => {
        _this.staffInfo.phone = isNaN ( _this.staffInfo.phone ) ? 0 : _this.staffInfo.phone.replace ( /\.|-/img, '' );
      }, 10 );
    },
    backStaffMans: function() {
      this.$router.push({
        path: "/main/staffMan",
        name: "staffMan"
      });
    },
    /**
     * 获取员工信息
     */

    getMans: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysEmployee/selectByEmpId`,
        data: qs.stringify({ id: Global.mansId })
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.staffInfo = res.data.data;
        } else {
          alert(res.data.msg);
        }
      });
    },
    cancel(){
      this.$router.push(
        {
          path:'/main/staffMan'
        }
      )
    },
    /**
     * 保存员工信息
     */
    saveMans: function(formName) {
      let that = this;
      let reg = /^[0-9]{11}$/;
      // if( !this.staffInfo.name || !this.staffInfo.roleName||!this.staffInfo.phone || !/^1\d{10}$/.test(this.staffInfo.phone) ||!this.staffInfo.userAccount || !/^[0-9a-zA-Z]*$/g.test(this.staffInfo.userAccount) ){
      //   return false
      // }
      let url = `${that.$store.state.url}/sysEmployee/addEmployee`;
      if (Global.mansEdit) {
        url = `${that.$store.state.url}/sysEmployee/updateEmployee`;
      }
      // 表单验证
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios({
            method: "post",
            url: url,
            data: qs.stringify(that.staffInfo)
          }).then(res => {
            if (res.data.code == 0) {
              this.$store.state.fn.success( Global.mansEdit ? '修改成功' : '新增成功' ).then (() => {
                that.backStaffMans();
              });
            } else {
              that.$alert(res.data.msg);
            }
          })
        } else {
          return false;
        }
      });
    }
  },
  mounted() {
    if (Global.mansEdit) {
      this.getMans();
      this.title = "编辑人员";
      this.showPas = false;
    }
  }
};
</script>
<style scoped>
.nomsg {
  color: red;
  padding-left: 150px;
}
.wrap {
  /* padding: 68px 136px;
  width: 100%; */
  width: 90%;
  margin: 40px auto;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title span {
  float: left;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.title .right {
  width: 11px;
  height: 18px;
  padding-top: 9px;
  margin-left: 5px;
  margin-right: 6px;
}
.body {
  background: #ffffff;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  /* width: 1490px; */
  width: 95%;
  margin: 60px auto;
  height: 709px;
  /* margin-top: 70px;
  margin-left: 48px; */
  /* padding-left: 233px; */
  padding-top: 90px;
  box-sizing: border-box;
}
.list {
  height: 40px;
}
.list {
  height: 40px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  line-height: 40px;
  /* margin-top: 49px; */
  /* width: 90%; */
  margin: 50px auto;
}
/* @media (min-width: 1900px) {
  .list {
    width: 60%;
  }
} */
.firlist {
  margin-top: 0;
}
.red {
  width: 10px;
  height: 10px;
}
.txt {
  width: 120px;
  display: inline-block;
  text-align: left;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}
.input {
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 502px;
  height: 40px;
  margin-left: 10px;
  padding-left: 10px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  box-sizing: border-box;
  text-align: center;
}
.tips {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #727272;
  margin-left: 150px;
}
.upload {
  margin-top: 55px;
}
.uptitle {
  height: 25px;
  line-height: 25px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  font-weight: bold;
}
.upimg {
  margin-top: 21px;
}
.upimg img {
  width: 320px;
  height: 205px;
  float: left;
  margin-left: 195px;
}
.info {
  width: 475px;
  padding-top: 38px;
  float: left;
  margin-left: 90px;
}
.uptxt {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #888888;
  height: 30px;
  line-height: 30px;
  margin-top: 15px;
}
.firtxt {
  margin-top: 0;
}
.btn {
  width: 255px;
  height: 55px;
  background: #085dab;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  margin-top: 47px;
  text-align: center;
  line-height: 55px;
}
.clear {
  clear: both;
}
.radio {
  display: inline-block;
  padding-left: 25px;
}
.radio img {
  width: 25px;
  height: 25px;
  float: left;
  border-radius: 50%;
}
.radio span {
  width: 37px;
  height: 25px;
  line-height: 25px;
  margin-left: 17px;
  float: left;
  margin-right: 59px;
  font-weight: bold;
}
.date {
  width: 172px;
  border-right: 0px;
}
.year {
  background: #085dab;
  border: 1px solid #979797;
  width: 45px;
  height: 38px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  display: inline-block;
  font-weight: bold;
}
.submit {
  background: #085dab;
  width: 255px;
  height: 55px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  line-height: 55px;
  text-align: center;
  /* margin-top: 153px; */
  margin: 120px auto;
  /* margin-left: 374px; */
  cursor: pointer;
}
.back {
  cursor: pointer;
}
.body-box {
  width: 680px;
  margin: 0 auto;
}
</style>
